<template>
  <div class="app-container">
    <div v-if="isonload">
      <el-row :gutter="20">
        <el-col :span="8" :xs="24">
          <el-card style="margin-bottom:20px;">
            <div class="user-profile">
              <div class="box-center">
                <el-upload
                  class="avatar-uploader"
                  :action="uploadurl"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload" 
                  :headers="myHeaders">
                  <el-avatar v-if="sub.avatar" style="width:80px;height:80px;;" fit='contain' :src="sub.avatar"></el-avatar>
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
              <div class="box-center">
                <div class="user-name text-center">{{ sub.nickname }}</div>
              </div>
            </div>
            <div class="user-bio">
              <div class="user-education user-bio-section">
                <div class="user-bio-section-header">
                  <div>登录账号：<span>{{ sub.username }}</span> </div>
                  <div>部门：
                    <span>
                      <el-tag size="small" style="margin-right: 8px;" v-for="(item,index) in group">{{item}}</el-tag>
                    </span>
                  </div>
                </div>
              </div>
              <div class="user-education user-bio-section">
                <div class="user-bio-section-header">
                  <div>
                    我的余额：<span>{{ sub.money }}</span> 元 
                    <el-button type="primary"  size="mini" style="margin-left: 18px;" @click="drawAll('ruleForm')">全部提现</el-button>
                  </div>
                </div>
              </div>
              <el-form ref="ruleForm" size="small" :model="sub" :rules="rules">

                <el-form-item label="昵称" prop="nickname">
                  <el-input v-model="sub.nickname" placeholder="请输入昵称" />
                </el-form-item>
                <el-form-item label="Email" prop="email">
                  <el-input v-model="sub.email" placeholder="请输入邮箱" clearable  autocomplete="off"/>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input placeholder="如果为空，则不修改" autocomplete="new-password"   v-model="sub.password" show-password></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="mobile">
                  <el-input v-model="sub.mobile" placeholder="请输入" clearable  autocomplete="off"/>
                </el-form-item>
                <el-form-item label="收款身份证号" prop="draw_idcard">
                  <el-input v-model="sub.draw_idcard" placeholder="请输入" clearable  autocomplete="off"/>
                </el-form-item>
                <el-form-item label="支付宝提现姓名" prop="draw_name_zfb">
                  <el-input v-model="sub.draw_name_zfb" placeholder="请输入" clearable  autocomplete="off"/>
                </el-form-item>
                  <el-form-item label="支付宝提现账号" prop="draw_account_zfb">
                  <el-input v-model="sub.draw_account_zfb" placeholder="请输入" clearable  autocomplete="off"/>
                </el-form-item>
              </el-form>
              <div style="margin-top: 30px;">
                <el-button @click="resetForm('ruleForm')" size="small" >重置</el-button>
                <el-button type="primary" size="small"  @click="subForm('ruleForm')">确定</el-button>
              </div>

            </div>
          </el-card>

        </el-col>

        <el-col :span="16" :xs="24">
          <el-card>
            <div slot="header" class="clearfix">
              <span>操作日志</span>
            </div>
            <el-table  ref="multipleTable"  v-loading="loading"  :data="list" current-row-key='index'  style="width: 100%;margin-bottom: 20px;" :empty-text='emtypetxt' >


                <el-table-column prop="id" label="ID" align="center" width="100" />

                <el-table-column prop="title" label="标题" align="center" />
                <el-table-column prop="ip" label="IP" align="center" />
                <el-table-column prop="useragent" label="Browser" align="center" width="350"/>
                <el-table-column prop="createtime" label="操作时间" align="center"  />

                <el-table-column label="操作" align="center" >
                  <template slot-scope="scope">
                      <el-button type="primary" size="mini" icon="el-icon-tickets" title='日志详情' plain   @click="detail(scope.$index)"></el-button>

                  </template>
                </el-table-column>

            </el-table>
            <div class="pagination">
                <el-pagination
                  :current-page="params.page"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="params.pagesize"
                  layout="total, prev, pager, next"
                  :total="total"
                  @current-change="handleCurrentChange"
                />
            </div>


          </el-card>
        </el-col>

      </el-row>
    </div>
    <el-dialog title="日志详情"
    :visible.sync="dialogVisible"
    center  width="30%">
    <div  class="dlog">
      <el-row >
        <el-col :span="12"><div class="grid-content bg-purple">id：</div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light">{{row.id}}</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"><div class="grid-content bg-purple">管理员ID：</div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light">{{row.admin_id}}</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"><div class="grid-content bg-purple">管理员：</div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light">{{row.username}}</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"><div class="grid-content bg-purple">标题：</div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light">{{row.title}}</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"><div class="grid-content bg-purple">路径：</div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light">{{row.url}}</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"><div class="grid-content bg-purple">内容：</div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light">{{row.content}}</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"><div class="grid-content bg-purple">IP：</div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light">{{row.ip}}</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"><div class="grid-content bg-purple">Browser：</div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light">{{row.useragent}}</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"><div class="grid-content bg-purple">操作时间：</div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light">{{row.createtime}}</div></el-col>
      </el-row>

    </div>

    </el-dialog>
  </div>
</template>

<script>
import { profile_index,profile_edit,profile_log} from '@/api/site'
import { admin_draw } from '@/api/admin'
import { getToken } from '@/utils/auth'


export default {
  data() {
    return {
      uploadurl:process.env.VUE_APP_BASE_API+'General/upload',
      imageUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      dialogVisible: false,
      total:0,
      loading:true,
      emtypetxt:'',
      isonload:false,
      list: [],
      row:[],
      params: {

        page: 1,
        pagesize:10,

      },

      group:[],
      sub:{
        id:'',
        username:'',
        nickname:'',
        email:'',
        avatar:'',
        password:'',
        draw_name_zfb:'',
        draw_account_zfb:'',
        draw_idcard:'',
        mobile:'',
      },
      rules: {
          nickname: [
              { required: true, message: '昵称不能为空', trigger: 'blur' },
          ],
      },
      myHeaders: {
        'token': getToken(),
      },

    }
  },

  created() {

    console.log(this.uploadurl)
    //账号信息
    profile_index().then(res => {
      this.sub=res.data.username
      this.group=res.data.group
      this.isonload=true
    })
    this.getLogs()



  },
  methods: {

    //数据提交
    subForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
                profile_edit(this.sub).then(res => {
                  
                    this.$notify({
                      title:'提示',
                      message:res.msg,
                      type: 'success',
                      duration: 2000
                    })
                    this.$store.dispatch('user/getUserInfo')
                  
                })
            } else {
              return false;
            }
        });
    },
    drawAll(formName) {
      if(this.sub.draw_name_zfb == ''){
        return this.$message.error('支付宝提现姓名不能为空！');
      }
      if(this.sub.draw_account_zfb == ''){
        return this.$message.error('支付宝提现账号不能为空！');
      }
      if(this.sub.draw_idcard.length < 15){
        return this.$message.error('收款身份证号有误！');
      }
      if(this.sub.mobile.length != 11){
        return this.$message.error('手机号码有误！');
      }
      if(this.sub.money <= 1){
        return this.$message.error('余额必须大于1元！');
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
            admin_draw(this.sub).then(res => {
                this.$notify({
                  title:'提示',
                  message:'提现成功！',
                  type: 'success',
                  duration: 2000
                })
                this.$store.dispatch('user/getUserInfo')
                this.sub.money = 0
            })
          } else {
            return false;
          }
      });
    },
    getLogs(formName) {
      //日志列表
      profile_log(this.params).then(res => {
        this.list=res.data.list
        this.total=res.data.total
        this.loading = false
        if(this.list.length==0){
          this.emtypetxt='暂无数据'
        }
      })
    },
    //查看
    detail(index){

       this.row=this.list[index]
       this.dialogVisible=true;


    },

    //重置表单
    resetForm(formName)
    {
       if (this.$refs[formName]!==undefined) {
          this.$refs[formName].resetFields();
       }
    },

    handleCurrentChange(val) {
        this.params.page = val
        this.getLogs()
    },

    handleAvatarSuccess(res, file) {

        if(res.code==1){
          this.sub.avatar= res.data.fullurl;
        }else{
          this.$message.error(res.msg);
        }

    },

    beforeAvatarUpload(file) {
        let types = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
        const isImage = types.includes(file.type);
        if (!isImage) {
           this.$message.error('上传图片格式不正确!');
        }
        const isLtSize = file.size / 1024 / 1024 < 5;
        if (!isLtSize) {
           this.$message.error('上传头像图片大小不能超过 5MB!');
        }
        return isImage && isLtSize;
    }
  }
}
</script>
<style lang="scss" scoped>
.box-center {
  margin: 0 auto;
  display: table;
}

.text-muted {
  color: #777;
}

.user-profile {
  .user-name {
    font-weight: bold;
  }

  .box-center {
    padding-top: 10px;
  }

  .user-role {
    padding-top: 10px;
    font-weight: 400;
    font-size: 14px;
  }

  .box-social {
    padding-top: 30px;

    .el-table {
      border-top: 1px solid #dfe6ec;
    }
  }

  .user-follow {
    padding-top: 20px;
  }
}

.user-bio {
  margin-top: 20px;
  color: #606266;

  span {
    padding-left: 4px;
  }

  .user-bio-section {
    font-size: 14px;
    padding: 6px 0px;

    .user-bio-section-header {
      border-bottom: 1px solid #dfe6ec;
      padding-bottom: 10px;
      margin-bottom: 10px;
      font-weight: bold;
      display: flex;flex-wrap: wrap;align-items: center;justify-content:space-between;
    }
  }
}
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
      margin-bottom: 10px!important;
}
.dlog{
    max-height: 80vh;
    padding:20px 15px 30px 0px;
    overflow: auto;
    .el-row{
      margin-top: 16px;
      font-size: 15px;
    }
  }


  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

</style>
